<template>
  <div class="preview-resume-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>简历预览</span>
        </div>
      </template>
      <div class="card-content">
        <!-- 查询表单组件 -->
        <resume-query-form
          :loading="loading || listLoading"
          @query="handleCombinedAction"
          @clear="handleClear"
        />

        <!-- 简历列表组件 -->
        <transition name="slide-fade">
          <resume-list
            v-if="resumeList.length > 0"
            :resume-list="resumeList"
            :lang="currentLang"
            @select="handleSelectResume"
          />
        </transition>

        <!-- JSON结果展示组件 -->
        <transition name="slide-fade">
          <json-viewer
            v-if="jsonResult"
            :json-data="jsonResult"
          />
        </transition>

        <!-- 无数据提示 -->
        <el-empty v-if="!loading && !jsonResult && !resumeList.length" description="请输入简历编号进行查询或输入用户ID获取简历列表"></el-empty>

        <!-- 错误提示 -->
        <el-alert
          v-if="errorMessage"
          :title="errorMessage"
          type="error"
          show-icon
          :closable="true"
          @close="errorMessage = ''"
        ></el-alert>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { previewResume } from '@/api/resume'
import { getResumeList } from '@/api/resumeList'
import ResumeQueryForm from '@/components/resume/preview/ResumeQueryForm.vue'
import ResumeList from '@/components/resume/preview/ResumeList.vue'
import JsonViewer from '@/components/resume/preview/JsonViewer.vue'

const loading = ref(false)
const listLoading = ref(false)
const jsonResult = ref<any>(null)
const errorMessage = ref('')
const resumeList = ref<any[]>([])
const currentLang = ref(1) // 默认中文

// 获取简历列表
const handleGetResumeList = async (userid: number, lang: number) => {
  if (!userid) {
    errorMessage.value = '请输入用户ID'
    return
  }

  listLoading.value = true
  errorMessage.value = ''
  resumeList.value = []
  
  try {
    const response = await getResumeList({
      userid,
      lang
    })
    if (response.code === 200 && response.data) {
      resumeList.value = response.data
    } else {
      errorMessage.value = response.message || '获取简历列表失败'
    }
  } catch (error) {
    console.error('获取简历列表错误:', error)
    errorMessage.value = '网络错误，请稍后重试'
  } finally {
    listLoading.value = false
  }
}

// 选择简历
const handleSelectResume = async (resume: any) => {
  loading.value = true
  errorMessage.value = ''
  jsonResult.value = null
  
  try {
    const response = await previewResume({
      resumeNumber: resume.resumeNumber,
      lang: resume.lang
    })
    jsonResult.value = response
  } catch (error) {
    console.error('API请求错误:', error)
    errorMessage.value = '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}

const handleCombinedAction = async (form: { userid: number; resumeNumber: string; lang: number }) => {
  // 更新当前语言
  currentLang.value = form.lang

  // 如果有用户ID，获取简历列表
  if (form.userid) {
    await handleGetResumeList(form.userid, form.lang)
  }

  // 如果有简历编号，直接预览简历
  if (form.resumeNumber) {
    await handleSelectResume({
      resumeNumber: form.resumeNumber,
      lang: form.lang
    })
  }
}

// 清空数据
const handleClear = () => {
  jsonResult.value = null
  errorMessage.value = ''
  resumeList.value = []
}
</script>

<style scoped>
.preview-resume-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 20px;
}

/* 动画相关样式 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>